<template>
  <div class="CompanyLayout">
    <!-- 标题 -->
    <Title>
      <template #default>{{ title }}</template>
    </Title>
    <!-- 内容区 -->
    <section class="contentLayout">
      <div class="company">
      <div style="display: flex;justify-content: right;align-items: center">
        <el-button type="primary">
          新建
        </el-button>
        <div class="tableSet2">
          <div>
            <el-icon size="19"><RefreshRight /></el-icon>
          </div>
          <div>
            <el-icon size="19"><Sort /></el-icon>
          </div>
          <div>
            <el-icon size="19"><Setting /></el-icon>
          </div>
        </div>
      </div>
      <el-table :data="companyList" style="width: 100%" >
        <el-table-column label="序号" width="60">
          <template #default="{ $index }">
            <span>{{ $index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="分行简称" width="180"/>
        <el-table-column prop="fullName" label="分行全称" width="180"/>
        <el-table-column prop="logo" label="分行logo" width="100">
          <template #default="{ row }">
            <el-button text type="primary">
              <el-image
                  style="width: 32px; height: 25px"
                  :preview-teleported="true"
                  :src="row.avatar_url"
                  :zoom-rate="1.2"
                  :max-scale="7"
                  :min-scale="0.2"
                  :preview-src-list="[row.avatar_url]"
                  fit="cover"
                  hide-on-click-modal
                  z-index="999"
              >
              </el-image>
            </el-button>
          </template>
        </el-table-column>
        <el-table-column prop="industryName" label="所属行业" width="120"/>
        <el-table-column prop="nature" label="分行性质" width="140" />
        <el-table-column prop="tel" label="联系电话" width="120"/>
        <el-table-column prop="staffSize" label="分行规模" width="120" />
        <el-table-column prop="introduce" label="分行简介" width="160" show-overflow-tooltip/>
        <el-table-column prop="workTime" label="工作时间" width="150" />
        <el-table-column prop="restTime" label="休息时间" width="100" />
        <el-table-column prop="workOvertime" label="加班情况" width="100" show-overflow-tooltip/>
        <el-table-column prop="address" label="地址详情" width="160" show-overflow-tooltip/>
        <el-table-column prop="weight" label="推荐值" width="80" />
        <el-table-column prop="updatedAt" label="编辑时间" width="160" show-overflow-tooltip/>
        <el-table-column fixed="right" label="操作" min-width="120">
          <template #default>
            <el-button link type="primary" size="default" @click="handleClick">编辑</el-button>
            <el-button link type="primary" size="default">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="display: flex;justify-content: right;padding: 10px" >
        <el-pagination
            layout="total, prev, pager, next"
            :total="10"
        />
      </div>
      </div>
    </section>
  </div>
</template>

<script setup>
import Title from "components/public/Title";
import { useRouter, useRoute } from "vue-router";
import { onMounted, ref } from "vue";
import {CompanyList} from "@/network/company";

const router = useRouter();
const route = useRoute();
const title = route.meta.title;

const handleClick = () => {
  console.log('click')
}
const companyList=ref([])

//获取所有招聘者信息
onMounted(()=>{
  CompanyList().then((res)=>{
    companyList.value=res.data.data.list
    console.log(res.data.data.list,'res')
  })
})
</script >

<style scoped lang="scss">
.company{
  background-color: white;
  padding: 0 24px;
}
.tableSet2 {
  padding: 16px 0;
  display: flex;
  justify-content: flex-end;
  div {
    padding: 8px;
  }
}

</style>